import { ImageResponse } from 'next/og';
import { t } from '@/i18n';
import { safe } from '@/lib/api';
import { apiExplore } from '@/lib/api-explore';
import { formatValue } from '@/lib/format';
import { OG_INK2, OG_INK3, OG_RULE, OG_SIZE_H, OG_SIZE_W, OgFrame, OgWordmark } from '../../og-shared';

export const alt = 'Indicator by country on CountryAtlas';
export const size = { width: OG_SIZE_W, height: OG_SIZE_H };
export const contentType = 'image/png';
export const revalidate = 3600;

/** Light→dark sequential ramp (globals.css --seq-1…7, light theme) — Satori needs literal colours. */
const SEQ = ['#cde2fb', '#9ec5f4', '#6da7ec', '#3987e5', '#256abf', '#184f95', '#0d366b'];

/** Per-indicator social image: name, world value + kind, year, coverage, mini sequential legend. */
export default async function IndicatorOgImage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const data = await safe(apiExplore.indicator(slug));
  const ind = data?.indicator;
  const name = ind?.name ?? slug.replace(/-/g, ' ');
  const wl = data?.world_latest ?? null;
  const kind = wl ? (wl.kind === 'sum' ? 'World total' : wl.kind === 'weighted_mean' ? 'World average' : 'World median') : null;
  const sub = [ind?.unit, ind?.topic ? ind.topic.replace(/-/g, ' ') : null].filter(Boolean).join(' · ');
  const coverage = data ? `${data.coverage.n_countries ?? 0} countries · ${data.years.first ?? ''}–${data.years.last_actual ?? ''}` : '';
  return new ImageResponse(
    (
      <OgFrame>
        <OgWordmark size={28} />
        <div style={{ display: 'flex', flexDirection: 'column', marginTop: 48, maxWidth: 900 }}>
          <div style={{ fontSize: 22, color: OG_INK3, textTransform: 'uppercase', letterSpacing: 2, display: 'flex' }}>{t('common.indicator')}</div>
          <div style={{ fontSize: name.length > 40 ? 52 : 64, fontWeight: 600, letterSpacing: -1.5, lineHeight: 1.05, marginTop: 8 }}>{name}</div>
          {sub ? <div style={{ marginTop: 10, fontSize: 24, color: OG_INK2 }}>{sub}</div> : null}
        </div>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginTop: 'auto', paddingTop: 24, borderTop: `1px solid ${OG_RULE}` }}>
          {wl && ind && wl.value != null ? (
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              <div style={{ fontSize: 18, color: OG_INK3, textTransform: 'uppercase', letterSpacing: 1.5 }}>{kind}</div>
              <div style={{ fontSize: 52, fontWeight: 600, marginTop: 6 }}>{formatValue(wl.value, ind)}</div>
              <div style={{ fontSize: 18, color: OG_INK3, marginTop: 2 }}>{`${wl.year ?? ''}${coverage ? ` · ${coverage}` : ''}`}</div>
            </div>
          ) : (
            <div style={{ fontSize: 24, color: OG_INK2 }}>{coverage || 'World map, trend, ranking and sources'}</div>
          )}
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
            <div style={{ display: 'flex', gap: 3 }}>
              {SEQ.map((c) => (
                <div key={c} style={{ width: 34, height: 14, background: c, borderRadius: 2 }} />
              ))}
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', width: 256, marginTop: 6, fontSize: 16, color: OG_INK3 }}>
              <span>low</span>
              <span>high</span>
            </div>
          </div>
        </div>
        <div style={{ position: 'absolute', right: 64, bottom: 24, fontSize: 20, color: OG_INK3 }}>{t('og.site')}</div>
      </OgFrame>
    ),
    { ...size },
  );
}